<template>
    <div class="register">
        <h2>注册页</h2>
        <div class="text">
            <input type="text" v-model="resg.tel" placeholder="输入手机号">
        </div>
        <div class="text">
            <input type="password" v-model="resg.psw" placeholder="输入密码">
        </div>
        <div class="text">
            <input type="password" v-model="resg.checkpsw" placeholder="确认密码">
        </div>
        <div class="btn">
            <button @click="register">注册</button>
        </div>
    </div>
</template>

<script>
import { user_register } from '../utils/api'
export default {
    data() {
        return {
            resg: {
                tel: '',
                psw: '',
                checkpsw: ''
            }
        }
    },
    methods: {
        register() {
            // console.log(this.res);
            // if (/^1[3-9]\d{9}$/.test(this.res.tel) == false) {
            //   alert('请重新输入手机号')
            // } else if (!this.res.psw || !this.res.checkpsw) {
            //   alert('请输入密码/确认密码')
            // } else if (this.res.psw !== this.res.checkpsw) {
            //   alert('密码和确认密码不一致');
            // } else {


            if (/^1[3-9]\d{9}$/.test(this.resg.tel) == false) {
                // alert('请输入合法的手机号');
            } else if (!this.resg.psw || !this.resg.checkpsw) {
                alert('请输入密码/确认密码')
            } else if (this.resg.psw !== this.resg.checkpsw) {
                alert('密码和确认密码不一致');
            } else { //验证通过 

                //深拷贝resg
                var newresg = JSON.parse(JSON.stringify(this.resg));
                //删除对象的checkpass属性
                delete newresg.checkpsw;

                //发起注册请求
                user_register(newresg).then((res) => {
                    if (res.data.code == 200) { //注册成功
                        alert('注册成功!')
                        //跳转到登录页
                        this.$router.push('/login');
                    } else {
                        alert(res.data.msg);

                    }
                })

            }
        }
    }
}
</script>

<style lang="scss" scoped>
h2 {
    margin-top: 10px;
    text-align: center;
}

.text {
    text-align: center;
    margin-top: 20px;
}

input {
    text-align: center;
    width: 95%;
    height: 40px;
    // background-color: rgb(177, 194, 183);

    border: 1px solid #9f9999;
    // outline: none;
    border-radius: 20px;
}

button {
    width: 95%;
    height: 40px;
    color: white;
    background-color: rgb(123, 190, 147);
    outline: none;
    border: 0px;
    border-radius: 20px;

}

.btn {
    margin-top: 30px;
    text-align: center;

}
</style>